<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="有糖开放平台" />
    <meta name="description" content="有糖开放平台" />
    <link type="image/x-icon" href="http://cdn1.utouu.com/platform/images/favorite.ico" rel="shortcut icon" />
    <title>网页应用授权流程说明 - 有糖开放平台</title>
    <link rel="stylesheet" type="text/css" media="all"  href="http://cdn1.utouu.com/platform/css/utouu.jquery.extends.pagenationstable.css" />
    <link rel="stylesheet" type="text/css" media="all"  href="http://cdn1.utouu.com/platform/css/ui-dialog.css" />
    <!--<link rel="stylesheet" type="text/css" media="all"  href="http://cdn1.utouu.com/platform/css/style.css?v=5" />-->
    <link rel="stylesheet" type="text/css" media="all"  href="css/style.css" />
</head>
<body>

<!-- 右侧悬浮 -->
<div class="warp_right">
    <div class="subPhone bg_icon">
        <div class="phone">400-720-9815 </div>
    </div>
    <div class="subTop bg_icon" id="gotop"></div>
</div>
<!-- 右侧悬浮END -->


<header class="warp_head bg_black"><div class="section">
    <div class="head_logo"><a href="index.html">有糖开放平台</a></div>
    <div class="head_menu">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="developer.html">开发者中心</a></li>
            <li><a href="manage.html" class="active">管理中心</a></li>
        </ul>
    </div>
    <div class="head_user">
        <a href="" class="hu_register">注册</a>
        <a href="" class="hu_login">登录</a>
        <!--<a href="" class="hu_register">退出</a>
        <a href="" class="hu_user"><img src="http://cdn1.utouu.com/platform/images/user.jpg" /></a>-->
    </div>
</div></header>


<div class="layout_file"><div class="section">
    <div class="bread"><a href="developer.html">开发者中心 &gt; </a><a href="announcement_list.html">API文档 &gt; </a>文档概述</div>


    <div class="warp_fMenu fL">
		<div class="lf_title active">
            <h3>授权登录相关流程</h3>
            <div class="lf_sub">
                <a href="file_login.html" class="lf_subTitle">移动应用授权流程说明</a>
                <a href="file_loginApp.html" class="lf_subTitle active">网页应用授权流程说明</a>
            </div>
        </div>

    </div>

    <div class="warp_fCon fR">
        <div class="wfc_title">网页应用授权流程说明</div>
        <div class="wfc_content">
            <div class="catalog">
                <h3>目录</h3>
                <a href="javascript:void(0);" class="catalog_btn">[隐藏]</a>
                <ul class="catalog_list">
                    <li><a href="#file1">1. 开发者流程概述</a></li>
                    <li><p><a href="#file1.1">1.1 网站上设置有糖登录入口</a></p></li>
                    <li><p><a href="#file1.2">1.2 用户登录验证和授权</a></p></li>
                    <li><p><a href="#file1.3">1.3 登录和授权完成后，跳转回网站</a></p></li>
                    <li><p><a href="#file1.4">1.4 获取并存储access token以及openid</a></p></li>
                    <li><p><a href="#file1.5">1.5 在网站上显示用户登录昵称与有糖头像</a></p></li>
                    <li><a href="#file2">2. 开发说明</a></li>
                </ul>
            </div>
            <div class="wfc_file">
                <div class="wfc_detail">
                    <a name="file1"></a>
                    <h2>1. 开发者流程概述</h2>
                    <p>开发流程主要包括如下几个步骤：</p>

                    <a name="file1.1"></a>
                    <h3>1.1 网站上设置有糖登录入口</h3>
                    <p>开发者可以在自己的网站首页入口和主要的登录、注册页面上放置“有糖登录”标识（见红色方框标记处）：</p>
					<img src="images/8.png" />
					<p>网站需要下载官方提供的“有糖登录”按钮图片，并按照UI规范将按钮放置在页面合适的位置。</p>

                    <a name="file1.2"></a>
                    <h3>1.2 用户登录验证和授权</h3>
                    <p> 1）用户点击有糖登录按钮之后，弹出有糖登录窗口，在登录窗口中将显示网站自己的Logo标识，网站名称以及首页链接地址。如果用户已登录有糖软件，也可以一键快速登录。如下图所示：</p>
                    <img src="images/9.png" />
                    <p> 2）成功登录后，弹出授权框引导用户授权（仅在第一次成功登录，以及第一次访问某个未授权的OpenAPI时会出现授权页），如下图所示：</p>
                    <img src="images/10.png" />

                    <a name="file1.3"></a>
                    <h3>1.3 登录和授权完成后，跳转回网站</h3>
                    <p>如果用户成功登录并授权，则跳转到指定的回调地址，该回调地址由第三方网站自行配置（在上一步的请求中传入），回调地址建议设置为网站首页或网站的用户中心。</p>

                    <a name="file1.4"></a>
                    <h3>1.4 获取并存储access token以及openid</h3>
                    <p>成功登录后，即可发送请求来获取access token以及openid，这两个参数在调用OpenAPI访问和修改用户数据时必须传入，网站需自行绑定或存储：</p>
                    <p> 1）access token用来判断用户在本网站上的登录状态，具有3个月有效期，用户再次登录时自动刷新。</p>
                    <p> 2）openid是此网站上唯一对应用户身份的标识，网站可将此ID进行存储便于用户下次登录时辨识其身份，或将其与用户在网站上的原有帐号进行绑定。</p>

                    <a name="file1.5"></a>
                    <h3>1.5 在网站上显示用户登录昵称与有糖头像</h3>
                    <p>建议网站调用get_user_info接口，在首页或顶部显示用户通过有糖帐号的登录状态，使用户体验一致，包括用户昵称、有糖头像，如下图所示：</p>
                    <img src="images/11.png" />
                </div>
				
				
                <div class="wfc_detail">
                    <a name="file2"></a>
                    <h2>2. 开发说明</h2>
                    <p>有糖登录功能使用国际通用的OAuth2.0协议进行验证与授权，可通过以下两种方式进行网站开发：</p>
                    <p> 1）使用有糖联合登录提供的SDK包，用户体验统一，只需要修改少量代码，不需要理解验证授权流程，需要快速接入有糖登录的应用可选用此方法。详见：<a href="">SDK下载</a></p>
                    <p> 2）根据有糖登录OAuth2.0协议，自主开发，此方法自定义程度较高，需要与现有系统进行整合的网站可选用此方法。详见：<a href="">OAuth2.0开发文档</a></p>
                </div>


            </div>
        </div>
    </div>

</div></div>





</body>
<script type="text/javascript" src="http://cdn1.utouu.com/platform/js/lib.js"></script>
<script type="text/javascript" src="http://cdn1.utouu.com/platform/js/gptop.js?v=5"></script>
</html>